<template>
    <div class="box">
        <h3>子组件</h3>
        <div>父组件传过来的count: {{ count }}</div>
        <div>组组件传过来的obj - obj.name: {{ obj.name }}</div>
        <button @click="changeCount">修改count</button>
        <button @click="changeObj">修改obj</button>
        <br>
        <button @click="changeCountHandler">调用父组件传递的函数修改count</button>
        <button @click="changeObjHandler">调用父组件传递的函数修改Obj</button>
    </div>
</template>

<script>
export default {
    name: "Child",
    // 1. 数组写法
    // props: ['count']
    // 2. 对象写法
    // props: {
    //     count: Number
    // }
    // 3. 配置对象
    props: {
        count: {
            type: Number,
            default: 5, // 设置不传参的默认值
            required: true // 是否必传
            // 注意: default 和 required 是互斥的
        },
        obj: {
            type: Object,
            // default: () => {}, // 这个大括号是函数体,函数体没有返回值,返回的und
            default: () => ({}) // 这个小括号是返回值,里面的大括号是对象
        },
        changeCountHandler: { required: true, type: Function },
        changeObjHandler: { required: true, type: Function }
    },
    methods: {
        changeCount() {
            this.count++
        },
        changeObj() {
            // this.obj = { name: '二哈' } // 这个不能修改

            this.obj.name = '毛毛' // 这个可以修改
        }
    }
}
</script>

<style scoped>

</style>